<template>
  <div class="home">
    <div class="mynav">
      <span
        v-for="item in 7"
        v-scroll-to="`#section-${item}`"
        :class="{ 'is-active': isActive === item }"
        :key="item"
        >{{ item }}</span
      >
    </div>
    <main>
      <section id="section-1">
        <Preview></Preview>
      </section>
      <section id="section-2">
        <ChinaMap></ChinaMap>
      </section>
      <section id="section-3">
        <CqMap></CqMap>
      </section>
      <section id="section-4">
        <CirclePack
          v-if="packData.length"
          :width="280"
          :height="280"
          yKey="r"
          :nodes="packData"
        ></CirclePack>
      </section>
      <section id="section-5">
        <Pie />
      </section>
      <section id="section-6">
        <Works></Works>
      </section>
      <section id="section-7">
        <Scatter></Scatter>
      </section>
    </main>
  </div>
</template>

<script>
import Pie from '../components/Pie.vue'
import Preview from '../components/Preview.vue'
import CirclePack from '../components/CirclePack.vue'
import Works from '../components/Works.vue'
import CqMap from '../components/CqMap.vue'
import ChinaMap from '../components/ChinaMap.vue'
import Scatter from '../components/Scatter.vue'
import { debounce } from 'lodash'

export default {
  components: {
    Pie,
    CirclePack,
    Works,
    CqMap,
    ChinaMap,
    Preview,
    Scatter
  },
  data () {
    return {
      peerHeight: 0,
      isActive: 1,
      packData: []
    }
  },
  mounted () {
    this.sectionHeight = document.querySelector('section').offsetHeight
    this.debouncedSetActive = debounce(this.setActive, 30)
    window.addEventListener('scroll', this.debouncedSetActive)
    this.createData()
  },
  methods: {
    setActive () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      const num = Math.ceil(scrollTop / this.sectionHeight)
      this.isActive = num + 1
    },

    createData () {
      this.packData = [
        { r: 20, industry: 'OA' },
        { r: 25, industry: '国家电网' },
        { r: 40, industry: '医疗软件' },
        { r: 35, industry: '机车制造' },
        { r: 50, industry: 'IT培训' },
        { r: 80, industry: '电子政务' },
        { r: 30, industry: '企业信息化' },
        { r: 60, industry: '物联网' },
        { r: 15, industry: '金融科技' },
        { r: 31, industry: '互联网教育' },
        { r: 33, industry: '互联网金融' }
      ]
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.debouncedSetActive)
  }
}
</script>

<style scoped>
  .mynav {
    position: fixed;
    right: 20px;
    top: 50%;
    width: 60px;
    transform: translateY(-50%);
    background-color: #161e29;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    overflow: hidden;
    z-index: 99999;
  }
  @media screen and (max-width: 375px) {
    .mynav {
      width: 30px;
    }
  }
  .mynav span {
    height: 40px;
    line-height: 40px;
    color: white;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
  }
  .is-active {
    background-color: #7041ff;
  }
  section {
    height: 100vh;
  }

</style>
